<template>
	<view class="app">
		<z-paging
			show-refresher-update-time
			show-refresher-when-reload
			v-model="orderList"
			ref="paging"
			:auto-clean-list-when-reload="false"
			@query="queryList"
		>
			<view class="top" slot="top">
				<u-tabs
					inactive-color="#999999"
					active-color="#3AB54A"
					font-size="28"
					duration="0.2"
					height="70"
					:list="list"
					:is-scroll="false"
					:current="current"
					@change="change"
				></u-tabs>
			</view>
			<view slot="empty" v-if="!isLogin">
				<u-empty text="请先前往登录" mode="permission"></u-empty>
			</view>
			<block v-for="item in orderList" :key="item._id">
				<order-item
					:item="item"
					@cancel="cancel"
					@confirm="confirm"
					@timeout="timeout"
					@appraise="appraise"
				></order-item>
			</block>
		</z-paging>
		<u-modal
			content="取消后支付金额将返还至账户余额，确认取消么？"
			show-cancel-button
			v-model="show"
			@cancel="orderId = ''"
			@confirm="cancelOrder"
		></u-modal>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import orderItem from "./components/order-item.vue"

export default {
	components: {
		orderItem
	},
	data() {
		return {
			// 分类
			list: [
				{ name: "全部", index: "all" },
				{ name: "服务中", index: 5 },
				{ name: "待确认", index: 6 },
				{ name: "待评价", index: 7 },
				{ name: "已完成", index: 8 }
			],
			current: 0,
			// 订单列表
			orderList: [],
			orderId: "",

			show: false,
			isLogin: false,
			flag: true
		}
	},
	onLoad() {
		uni.$on("noFresh", () => {
			this.flag = false
		})
	},
	onShow() {
		if (this.$refs.paging && this.flag) {
			this.$refs.paging.reload()
		}
		this.flag = true
	},
	methods: {
		// 切换分类
		change(e) {
			this.current = e
			this.$refs.paging.reload()
		},
		// 查询服务订单列表
		queryList(pageIndex, pageSize) {
			this.isLogin = vk.checkToken()
			if (!this.isLogin) {
				return this.$refs.paging.complete(false)
			}
			const { list, current } = this
			vk.callFunction({
				url: "client/order.queryMyServiceOrder",
				data: {
					pageSize,
					pageIndex,
					status: list[current].index
				}
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 取消
		cancel(item) {
			if (item.status >= 0 && item.status <= 2) {
				this.show = true
				this.orderId = item._id
			} else {
				vk.navigateTo(`/pages/order/cancel?id=${this.oid}`)
			}
		},
		cancelOrder() {
			vk.callFunction({
				url: "client/order.cancelMyOrder",
				title: "取消中...",
				data: { oid: this.orderId }
			}).then(() => {
				this.orderId = ""
				vk.toast("取消成功")
				this.$refs.paging.reload()
			})
		},
		timeout() {
			this.$refs.paging.reload()
		},
		// 确认
		confirm(item) {
			vk.navigateTo(`/pages/order/confirm?id=${item._id}`)
		},
		// 评价
		appraise(item) {
			vk.navigateTo(`/pages/order/appraise?id=${item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 50px - 88rpx);
	/* #endif */
	background-color: #f5f5f5;
}
</style>
